<template>
    <div class="error-page">
        <a-result v-if="result" :status="result.status" :title="result.title">
            <template #subtitle>
                <div>{{ result.subTitle }}</div>
            </template>

            <template #extra>
                <a-space>
                    <a-button type="primary" @click="router.push('/')">返回首页</a-button>
                    <a-button v-if="result.title === '401'" type="outline"
                        @click="router.push('/console/login')">去登录</a-button>
                    <a-button v-else type="outline" @click="router.go(-1)"> 返回上一页</a-button>
                </a-space>
            </template>
        </a-result>
    </div>
</template>

<script lang="ts" setup>

// 初始化路由和响应式数据
const router = useRouter();
const result = ref({} as any);

// 根据code获取错误信息
const errorMap = {
    "401": {
        status: 'error',
        title: '401',
        subTitle: '登录失效，请重新登录',
    },
    "403": {
        status: 'error',
        title: '403',
        subTitle: '抱歉，你没有权限访问此页面',
    },
    "404": {
        status: 'error',
        title: '404',
        subTitle: '抱歉，你访问的页面不存在',
    },
    "500": {
        status: 'error',
        title: '500',
        subTitle: '抱歉，服务器出错了',
    },
} as any;

// 组件挂载后初始化错误信息
onMounted(() => {
    try {
        // 这里可以从路由参数或其他来源获取错误码
        const code = String(router.currentRoute.value.params.code);
        logger('Error Page Code', code)
        result.value = errorMap[code] || errorMap["404"];
    } catch (error) {
        console.error('Failed to parse error code:', error);
        result.value = errorMap["404"];
    }
});
</script>

<style lang="css" scoped>
.error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
</style>